<template>
  <div>
          <!-- <div class="header">
      <ul>
        <li class="li1">
          <p><span>登录</span>|<span>注册</span></p>
        </li>
        <li class="li1">我的订单</li>
        <li class="li1">我的收藏</li>
        <li class="li1 li2"><span class="el-icon-shopping-cart-full"></span>购物车<span>0</span></li>
      </ul>
    </div> -->
    <div class="box">
       
    <!-- 轮播图 -->
    <div class="block">
      <el-carousel trigger="click" >
        <el-carousel-item v-for="item in swiperList" :key="item.carousel_id">
          <img :src="'http://101.132.181.9:3000/' + item.imgPath" alt=""/>
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 手机部分 -->
    <div class="phone">手机</div>
    <div class="phone-main">
        <div class="main-left">
          <img src="http://101.132.181.9:3000/public/imgs/phone/phone.png" alt="">
        </div>
        <div class="main-right">
           <div class="box-1" v-for="item in phoneList" :key="item.category_id" @click="goto(item.product_id)">
              <img :src="'http://101.132.181.9:3000/' + item.product_picture" alt="" width="150px" height="150px" class="img1">
              <div class="box-2">
                   <p>{{item.product_name}}</p>
              <p style="color:grey">{{item.product_title}}</p>
              <p><span style="color:orange">{{item.product_selling_price}}</span><s style="color:grey">{{item.product_price}}</s></p>
              </div>
             
           </div>
        <div class="box-3">浏览更多》》</div>
        </div>
    </div>
    <!-- 家电 -->
    <div class="jd">家电</div>
        <div class="jd-main">
        <div class="jd-left">
             <div class="left-1">
                 <img src="http://101.132.181.9:3000/public/imgs/appliance/appliance-promo1.png" alt="" width="100%" height="320px">
             </div>
             <div class="left-1">
              <img src="http://101.132.181.9:3000/public/imgs/appliance/appliance-promo2.png" alt="" height="320px" width="100%">
             </div>
        </div>
        <div class="jd-right">
           <div class="box-1" v-for="item1 in jdList" :key="item1.product_id" @click="goto(item1.product_id)">
              <img :src="'http://101.132.181.9:3000/' + item1.product_picture" alt="" width="170px" height="150px" class="img1">
              <div class="box-2">
                   <p>{{item1.product_name}}</p>
              <p style="color:grey">{{item1.product_title}}</p>
              <p><span style="color:orange">{{item1.product_selling_price}}</span><s style="color:grey">{{item1.product_price}}</s></p>
              </div>
             
           </div>
        <div class="box-3">浏览更多》》</div>
        </div>
    </div>
    <!-- 配件区域 -->
     <div class="parts">配件</div>
          <div class="jd-main">
        <div class="jd-left">
             <div class="left-1">
                 <img src="http://101.132.181.9:3000/public/imgs/accessory/accessory-promo1.png" alt="" width="100%" height="100%">
             </div>
             <div class="left-1">
              <img src="http://101.132.181.9:3000/public/imgs/accessory/accessory-promo2.png" alt="" width="100%" height="100%">
             </div>
        </div>
        <div class="jd-right">
           <div class="box-1" v-for="item2 in productList" :key="item2.product_id" @click="goto(item2.product_id)">
              <img :src="'http://101.132.181.9:3000/' + item2.product_picture" alt="" width="170px" height="150px" class="img1">
              <div class="box-2">
                   <p>{{item2.product_name}}</p>
              <p style="color:grey">{{item2.product_title}}</p>
              <p><span style="color:orange">{{item2.product_selling_price}}</span><s style="color:grey">{{item2.product_price}}</s></p>
              </div>
             
           </div>
        <div class="box-3">浏览更多》》</div>
        </div>
    </div>
    </div>
  </div>
</template>


<script>
import {  carousel,phoneList ,jdList,productList} from "@/api/api.js";

export default {
    data() {
    return {
      swiperList: [], //轮播图数据
      phoneList:[],//手机区域数据
      jdList:[],//家电区域数据
      productList:[],//配件区域数据
    };
  },
  created() {
    this.getcarousel(); //轮播图
    this.getphonelist();//手机区域
    this.getjdlist();//家电区域
    this.getproductlist();//配件区域
      },

  methods: {
    //跳转详情
    goto(v){
      //  console.log(v,"v")
       this.$router.push({
        name:'details',
        params:{
           productID:v
        }
       })
    },
    async getproductlist(){
        let res=await productList({categoryName:"保护套"})
        // console.log(res,'pj')
        this.productList=res.Product
    },
    async getjdlist(){//家电
      let res=await jdList({categoryName:"电视机"})
      // console.log(res,'jd')
      this.jdList=res.Product
    },
    async getphonelist(){//手机
       let res=await phoneList({categoryName:"手机"})
      //  console.log(res,"shouji")
       this.phoneList=res.Product
    },
    async getcarousel() {//轮播图
      let res = await carousel();
      // console.log(res, "轮");
      this.swiperList = res.carousel;
    },
  },
};
</script>
<style lang="scss" scoped>
li {
  cursor: pointer;
}
.el-menu.el-menu--horizontal {
  border: none;
}
.phone{
  width: 100%;
  height: 50px;
  margin-top: 10px;
  background-color: #f5f5f5;
  line-height: 50px;
  font-size: 25px;

}
.box{
  width: 1200px;
  background-color: white;
  margin: 0 auto;
 
}
.phone-main{
  width: 100%;
  display: flex;
  background-color:white;
  justify-content: space-around;
  // height: 703px;
}
.main-left{
  // width: 30%;
  display: flex;
}
.main-right{
  display: flex;
  flex: 1;
  // width: 70%;
  justify-content: space-around;
  align-content: space-around;
  flex-wrap: wrap;
  background-color: #f5f5f5;
  .box-1{
    width: 220px;
    height: 310px;
    background-color: white;
    display: flex;
    justify-content:space-around;
    flex-direction: column;
  align-items: center;
  margin: 5px;
  transition: 0.7s;
    .box-2{
     height: 80px;
    background-color: white;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
  align-items: center;
  
  }
  }
  .box-3{
     width: 220px;
    height: 310px;
    background-color: white;
     text-align: center;
     line-height: 280px;
  }

}
  .box-1:hover{
   box-shadow: 0px 5px 10px #e1e1e1;
   margin-top: -0.3px;
}
.jd{
  width: 100%;
  height: 50px;
    margin-top: 10px;
  background-color: #f5f5f5;
  line-height: 50px;
  font-size: 25px;
}
.jd-main{
  width: 100%;
  display: flex;
  height: 700px;
  background-color: #f5f5f5;
  .jd-left{
    display: flex;
    width: 20%;
    flex-direction: column;
    justify-content: space-around;
   .left-1{
 width: 100%;
    // height: 49%;
    height: 320px;
    background-color: red;
  }
  }
}
  .jd-right{
    display: flex;
  flex: 1;
  // width: 70%;
  justify-content: space-around;
  align-content: space-around;
  flex-wrap: wrap;
  background-color: #f5f5f5;
  .box-1{
    width: 24%;
    height: 320px;
    background-color: white;
    display: flex;
    justify-content:space-around;
    flex-direction: column;
  align-items: center;
        margin: 3px;
  transition: 0.7s;
    .box-2{
     height: 80px;
    background-color: white;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
  align-items: center;
  
  }
  }
}
 .box-3{
     width: 230px;
    height: 320px;
    background-color: white;
     text-align: center;
     line-height: 280px;
  }
  .parts{
  width: 100%;
  height: 50px;
    margin-top: 10px;
  background-color: #f5f5f5;
  line-height: 50px;
  font-size: 25px;
}
</style>